<template>
  <div class="header">
    <div class="header-left">
      <div class="iconfont back-icon">&#xe6a4;</div>
    </div>
    <div class="header-input">
      <span class="iconfont input-icon">&#xeb9c;</span>
      输入城市/景点/游玩主题</div>
      <router-link to="/city">
    <div class="header-right">
      {{this.city}}
      <span class="iconfont city-icon">&#xe600;</span>
    </div>
      </router-link>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: "HomeHeader",  
  computed: {
    ...mapState(['city'])
  }
};
</script>
<style lang="stylus" scoped>
  @import '~styles/variables.styl';
    .header
        line-height: $headerHeight
        display: flex
        background-color $bgColor
        color: #fff
        .header-left
            width: .64rem
            float: left
            .back-icon
              text-align center
              font-size .4rem
        .header-input
            flex: 1
            background-color: #fff;
            border-radius: .1rem
            height .62rem
            margin-top .12rem
            margin-left .2rem
            color: #ccc
            line-height .62rem
            padding-left .1rem
            .input-icon
              vertical-align middle
        .header-right
            min-width: 1.04rem
            padding: 0 .1rem
            float: right
            text-align center
            color #fff
            .city-icon
              font-size .24rem
              margin-left -.04rem
</style>